<template>
  <div class="drop-container" @click.stop.prevent="prevent">
    <Button
      v-if="list.length == 1 && !list[0].hide && !forceDropdown"
      class="btn-item"
      :type="list[0].type || 'primary'"
      :size="list[0].size || 'default'"
      @click="list[0].callback">{{list[0].text}}
    </Button>
    <div v-else class="btn-item">
      <!-- 默认先显示按钮 -->
      <Button
        v-for="(item) in buttonList"
        class="btn-item"
        :disabled="item.disabled"
        :key="item.name"
        :type="item.type || 'primary'"
        :size="item.size || 'small'"
        @click="item.callback"
      >
        {{item.text}}
      </Button>
      <!-- 然后显示下拉菜单 -->
      <Dropdown
        v-if="dropdownList.length > 1 || forceDropdown"
        :stop-propagation="true"
        class="dropdown-menu"
        :style="getDropdownStyle()"
        trigger="click"
        @on-click="toggleItem">
        <Button class="button" :type="button.type || 'primary'" :size="button.size || 'small'" :disabled="button.disabled" @click="handleDropdownClick">
          {{button.text || '请选择'}}<Icon type="ios-arrow-down"></Icon>
        </Button>
        <DropdownMenu slot="list">
          <DropdownItem v-for="item in dropdownList"  :name="item.name" :key="item.name" :class="item.readonly ? 'readonly' : ''" :disabled="!!item.disabled" :divided="!!item.divided">
            {{item.text}}
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </div>
  </div>
</template>

<script>
export default {
  /**
      button: {
        text: '请选择',
        size: 'small',
        type: 'primary'
      },
      data: {
        id: 1,
        name: '张三'
      },
      list: [
        {
          name: 'manage1',
          text: '管理1',
          readonly: true,
          // 不在Dropdown中显示
          button: true,
          hide: true,
          type: 'primary',
          callback: (item) => {
            console.log(item)
          }
        },
        {
          name: 'manage2',
          text: '管理2',
          disabled: true,
          divided: true,
          callback: (item) => {
            console.log(item)
          }
        }
      ]
    */
  props: {
    forceDropdown: {
      type: Boolean,
      default: false
    },
    button: {
      type: Object,
      default: () => {}
    },
    data: {
      type: Object,
      default: () => {}
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    list: {
      deep: true,
      handler (newValue) {
        this.init()
      }
    }
  },
  data () {
    return {
      buttonList: [],
      dropdownList: []
    }
  },
  beforeMount () {
    this.init()
  },
  methods: {
    prevent () {},
    init () {
      this.buttonList = []
      this.dropdownList = []
      let buttonList = this.buttonList
      let dropdownList = this.dropdownList
      this.list.forEach(item => {
        if (item.button) {
          buttonList.push(item)
        } else if (!item.hide) {
          dropdownList.push(item)
        }
      })

      if (dropdownList.length === 1 && !this.forceDropdown) {
        buttonList.push(dropdownList[0])
      }
    },
    toggleItem (name) {
      let list = this.dropdownList
      let item = null
      for (let i = 0; i < list.length; i++) {
        item = list[i]
        if (item.name === name) {
          !item.disabled && item.callback && item.callback(name)
          break
        }
      }
      document.body.click()
    },
    handleDropdownClick () {
      document.body.click()
    },
    getDropdownStyle () {
      let style = {}
      if (this.buttonList.length) {
        style['margin-left'] = '5px'
      }

      return style
    }
  }
}
</script>

<style lang="less" scoped>
.drop-container {
  .btn-item {
    display: inline-block;
    &:not(:first-child) {
      margin-left: 10px;
    }
    .dropdown-menu {
      /deep/ .ivu-dropdown-menu {
        max-height: 300px;
        overflow-y: auto;
      }
      /deep/ .ivu-dropdown-item-disabled:hover {
        color: #c5c8ce !important;
        background-color: #fff !important;
      }
      /deep/ .readonly {
        cursor: no-drop;
        &:hover {
          background-color: #fff !important;
          color: #515a6e !important;
        }
      }
    }
  }
  .btn-item-text {
    cursor: pointer;
    color: @primary;
    &.disabled {
      cursor: no-drop;
      color: #ccc;
    }
  }
}
</style>
